<template>
  <div class="app-container">
    <el-container style="border: 1px solid #eee">
      <el-header>
        <div style="margin-top: 15px;">
          <el-input v-model="url" placeholder="请输入完整网址" class="">
            <el-select slot="prepend" v-model="type" placeholder="请选择类型">

              <el-option label="animedakimkurapillow" value="animedakimkurapillow" />
              <el-option label="halodakimakura" value="halodakimakura" />
              <el-option label="ebay" value="ebay" />
            </el-select>
            <el-button slot="append" type="success" icon="el-icon-search" @click="onSubmit">抓取</el-button>
          </el-input>
        </div>
      </el-header>
      <el-container>
        <el-main>
          <el-row>
            <el-col :span="6">
              <div class="grid-content bg-purple"><img :src="searchDatas.image" alt=""></div>
            </el-col>
            <el-col :span="12" :offset="6">
              <el-row :gutter="20">
                <div class="grid-content bg-purple">{{ searchDatas.title }}</div>
                <div>价格:{{ searchDatas.price }} <span>发布:{{ searchDatas.published }}</span></div>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6" :offset="18">
                  <el-button type="success" plain>保存到系统</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row />
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
import { GetSignleProduct } from '@/api/erp/crawlproduct'

export default {
  name: 'CrawlProduct',
  data() {
    return {
      url: '',
      type: 'shopify',
      searchDatas: {
        image: 'https://cdn.shopify.com/s/files/1/0171/4110/products/18054-1_Warsprite_-_Kantai_Collection_copy_a8ee908c-4086-4d84-9f96-9b2769c10bf4_grande.jpg?v=1526543526',
        title: 'New Warsprite - Kantai Collection Anime Dakimakura Japanese Hugging Body Pillow Cover ADP18054-1',
        price: '49.99',
        published: ''
      }
    }
  },
  methods: {
    onSubmit() {
      GetSignleProduct(JSON.stringify({ type: this.type, url: this.url })).then((response) => {
        this.searchDatas = response.data
        this.loading = false
      })
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
  .app-container >>> .el-select .el-input {
    width: 130px;
  }

  .app-container >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>
